<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      @layer reset, global, modules;

      @layer reset {
        *,
        *::before,
        *::after {
          box-sizing: border-box;
        }

        body {
          margin: unset;
        }

        button,
        input,
        textarea,
        select {
          font: inherit;
        }

        img,
        picture,
        svg,
        canvas {
          display: block;
          max-width: 100%;
          height: auto;
        }
      }

      @layer global {
        body {
          font-family: Helvetica, Arial, sans-serif;
        }
      }

      @layer modules {
        .media {
          display: flex;
          gap: 1.5em;
          padding: 1.5rem;
          background-color: #eee;
          border-radius: 5px;
        }

        .media__image {
          align-self: start;
        }

        .media__body {
          overflow: auto;
          margin-block-start: 0;
        }

        .media__body > h4 {
          margin-block-start: 0;
          color: #333;
        }

        /* restrict width for demo purposes */
        .wrapper {
          max-inline-size: 600px;
          margin: 2em auto;
        }
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <div class="media">
        <img
          class="media__image"
          src="runner.png"
          alt="Silhouette of a person running"
        />
        <div class="media__body">
          <h4>Strength</h4>
          <p>
            Strength training is an important part of injury prevention. Focus
            on your core&mdash; especially your abs and glutes.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>
